<!--运营商侧边栏-->
<template>
  <!--总运营商和合作商-->
  <div>
    <ul class="sider_ul" v-if="sidetype==4">
      <li
        class="sider_li"
        v-for="(item, index) in items"
        :key="index"
        :class="{ current: tabCurrentIndex === index }"
        @click="tabClick(index,item.index)"
      >
        <div>
          <img
            :src="tabCurrentIndex === index?item.icon_hui:item.icon"
            :width="item.width"
            :height="item.height"
          />
          <p slot="title" class="menutitle">{{item.title}}</p>
        </div>
        <img src="../../../static/image/leftbottom.png" alt class="borderbot" />
      </li>
    </ul>
    <!--制造商-->
    <ul class="sider_ul" v-else-if="sidetype==1">
      <li
        class="sider_li"
        v-for="(item, index) in manufacturerItem"
        :key="index"
        :class="{ current: tabCurrentIndex === index }"
        @click="tabClick(index,item.index)"
      >
        <div>
          <img
            :src="tabCurrentIndex === index?item.icon_hui:item.icon"
            :width="item.width"
            :height="item.height"
          />
          <p slot="title" class="menutitle">{{item.title}}</p>
        </div>
        <img src="../../../static/image/leftbottom.png" alt class="borderbot" />
      </li>
    </ul>
    <!--生产商-->
    <ul class="sider_ul" v-else-if="sidetype==2">
      <li
        class="sider_li"
        v-for="(item, index) in productionItem"
        :key="index"
        :class="{ current: tabCurrentIndex === index }"
        @click="tabClick(index,item.index)"
      >
        <div>
          <img
            :src="tabCurrentIndex === index?item.icon_hui:item.icon"
            :width="item.width"
            :height="item.height"
          />
          <p slot="title" class="menutitle">{{item.title}}</p>
        </div>
        <img src="../../../static/image/leftbottom.png" alt class="borderbot" />
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import bus from "./bus";
export default {
  computed: {
    ...mapState({
      token: state => state.Authorization,
      acountType: state => state.userData.type
    })
  },

  data() {
    return {
      sidetype: "",
      tabCurrentIndex: 0,
      /**口罩机制造商 1 */
      manufacturerItem: [
        {
          icon: "../../../static/image/type5.png",
          icon_hui: "../../../static/image/type5_hui.png",
          index: "/operator_model",
          title: "型号管理",
          width: "25",
          height: "25"
        },
        {
          icon: "../../../static/image/type3.png",
          icon_hui: "../../../static/image/type3_hui.png",
          index: "/operator_producer",
          title: "生产商管理",
          width: "30",
          height: "29"
        },
        {
          icon: "../../../static/image/type6.png",
          icon_hui: "../../../static/image/type6_hui.png",
          index: "/operator_mask",
          title: "口罩机管理",
          width: "29",
          height: "25"
        }
      ],
      /**口罩生产商 2*/
      productionItem: [
        {
          icon: "../../../static/image/type6.png",
          icon_hui: "../../../static/image/type6_hui.png",
          index: "/operator_mask",
          title: "口罩机管理",
          width: "29",
          height: "25"
        }
      ],
      /**总运营商和平台商 3 4 */
      items: [
        {
          icon: "../../../static/image/type2.png",
          icon_hui: "../../../static/image/type2_hui.png",
          index: "/operator_type",
          title: "分类管理",
          width: "25",
          height: "25"
        },
        {
          icon: "../../../static/image/type2.png",
          icon_hui: "../../../static/image/type2_hui.png",
          index: "/operator_account",
          title: "账号管理",
          width: "25",
          height: "25"
        },
        {
          icon: "../../../static/image/type5.png",
          icon_hui: "../../../static/image/type5_hui.png",
          index: "/operator_model",
          title: "型号管理",
          width: "25",
          height: "25"
        },
        {
          icon: "../../../static/image/type10.png",
          icon_hui: "../../../static/image/type10_hui.png",
          index: "/operator_publiAttr",
          title: "公共属性管理",
          width: "32",
          height: "25"
        },
        {
          icon: "../../../static/image/type1.png",
          icon_hui: "../../../static/image/type1_hui.png",
          index: "/operator_manufacturer",
          title: "制造商管理",
          width: "26",
          height: "30"
        },
        {
          icon: "../../../static/image/type3.png",
          icon_hui: "../../../static/image/type3_hui.png",
          index: "/operator_producer",
          title: "生产商管理",
          width: "30",
          height: "29"
        },
        {
          icon: "../../../static/image/type4.png",
          icon_hui: "../../../static/image/type4_hui.png",
          index: "/operator_variable",
          title: "变量管理",
          width: "25",
          height: "27"
        },

        {
          icon: "../../../static/image/type6.png",
          icon_hui: "../../../static/image/type6_hui.png",
          index: "/operator_mask",
          title: "口罩机管理",
          width: "29",
          height: "25"
        },
        {
          icon: "../../../static/image/type7.png",
          icon_hui: "../../../static/image/type7_hui.png",
          index: "",
          title: "实时监控",
          width: "27",
          height: "27"
        },
        {
          icon: "../../../static/image/type8.png",
          icon_hui: "../../../static/image/type8_hui.png",
          index: "/operator_record",
          title: "产能报表",
          width: "22",
          height: "32"
        },
        {
          icon: "../../../static/image/type9.png",
          icon_hui: "../../../static/image/type9_hui.png",
          index: "/operator_record",
          title: "历史数据",
          width: "27",
          height: "27"
        },
        {
          icon: "el-icon-goods",
          index: "/testupload",
          title: "图片测试",
          width: "25",
          height: "25"
        }
      ]
    };
  },
  created() {
    console.log(this.acco);
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  },
  mounted() {
    //根据模块跳转不同的首页
    this.sidetype = this.acountType;
    if(this.sidetype==4 ||this.sidetype==3){
     this.$router.replace('/operator_type')
    }else if(this.sidetype==1){
       this.$router.replace('/operator_model')
    }else if(this.sidetype==2){
       this.$router.replace('/operator_mask')
    }
    // this.$router.push({
    //   //核心语句
    //   path: "/operator_type"
    // });
  },
  methods: {
    tabClick(index, path) {
      this.tabCurrentIndex = index;
      this.$router.push({
        //核心语句
        path: path
      });
    }
  }
};
</script>
<style lang="less" scoped>
.sider_ul {
  width: 90%;

  margin: 0 auto;
  .sider_li:last-child {
    border: none;
  }
  .sider_li {
    position: relative;
    width: 100%;
    height: 100px;
    color: #00e8ff;
    font-size: 16px;
    // border-bottom: 1px dashed #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .borderbot {
      position: absolute;
      bottom: -1px;
    }
  }
  .current {
    background: #45bde3;
    color: #fff;
    position: relative;
  }
  .current::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    right: -10px;
    border-top: 10px solid transparent;
    border-left: 10px solid #45bde3;
    border-bottom: 10px solid transparent;
    z-index: 1000;
  }
}
// .react {
//   width: 100%;
//   height: 100%;
//   padding: 15px 0 0;
//   box-sizing: border-box;
//   background: linear-gradient(to left, #00e8ff, #00e8ff) left top no-repeat,
//     linear-gradient(to bottom, #00e8ff, #00e8ff) left top no-repeat,
//     linear-gradient(to left, #00e8ff, #00e8ff) right top no-repeat,
//     linear-gradient(to bottom, #00e8ff, #00e8ff) right top no-repeat,
//     linear-gradient(to left, #00e8ff, #00e8ff) left bottom no-repeat,
//     linear-gradient(to bottom, #00e8ff, #00e8ff) left bottom no-repeat,
//     linear-gradient(to left, #00e8ff, #00e8ff) right bottom no-repeat,
//     linear-gradient(to left, #00e8ff, #00e8ff) right bottom no-repeat;
//   background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
// }
</style>